<template>
  <div class="app-container">
      <div class="right-detail">
            <!-- <div class="cbox">
              <el-form class="form" ref="flt" :rules="rules" :model="from" label-width="13rem" size="mini">
                <el-row  class="row">
                  <el-col :span="6">
                    <el-form-item label="反馈人姓名：" label-width="10rem">
                      <el-input    v-model="from.fbDrivername" style="width: 100%" clearable ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="反馈人电话：" label-width="10rem">
                      <el-input    v-model="from.fbPhone" style="width: 100%" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="反馈地点：">
                      <el-input    v-model="from.fbAddress" style="width: 100%" clearable></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="2">
                    <el-form-item label-width="10px">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div> -->
            <div class="top-type" ref="topType">
                  <div class="table" ref="inner">
                  <el-table
                      :data="DetailedData"
                      border
                      :height="maxheight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-click="rowClick">
                      <el-table-column type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="fbAddress" show-overflow-tooltip label="反馈地点" ></el-table-column>
                      <el-table-column prop="fbDrivername" show-overflow-tooltip label="反馈人姓名" ></el-table-column>
                      <el-table-column prop="fbPhone" show-overflow-tooltip label="反馈人电话" ></el-table-column>
                      <el-table-column prop="fbMessage" show-overflow-tooltip label="反馈内容" ></el-table-column>

                  </el-table>
                  </div>
                    <!-- 分页 -->
                      <div class="pages">
                        <el-pagination
                          class="pagination"
                          small
                          background
                          ref="pagination"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="Pagination.currentPage"
                          :page-sizes="Pagination.pageSizeList"
                          :page-size="Pagination.pageSize"
                          :layout="Pagination.layout"
                          :total="Pagination.total"
                        ></el-pagination>
                      </div>
              </div>
        </div>
  </div>
</template>

<script>
import {feedbackList} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      maxheight:-1,
      from:{
        fbPhone:'',
        fbDrivername:'',
        fbAddress:''
      },
      DetailedData:[], //主列表的数据
    }
  },
  created(){
  this.resize=()=>{
      this.maxheight=this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList()
  },
  methods:{
    //查询
    // searchType(){
    //    this.refreshList()
    // },
    //表格数据
    getList(currentPage, pageSize, updateTotal) {
      feedbackList({
        fbPhone:this.from.fbPhone,
        fbDrivername:this.from.fbDrivername,
        fbAddress:this.from.fbAddress,
        PageIndex: currentPage.toString(),
        PageSize: pageSize.toString()
      }).then(response => {
        this.DetailedData = response.data
        updateTotal(Number(response.total))
      })
    },

  }
}
</script>

<style  lang="scss" scoped>
.app-container {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  height: 100%;
}
.right-detail {
  height:100%;
  .top-type {
    width: 100%;
    height: 94%;
    display:flex;
    flex-direction:column;
    .btn-area{
      padding:0 0 10px 0;
    }
    .table {
      flex:1;
    }
    .pages{
      height:30px;
    }
  }
  .bottom-code {
    width: 100%;
    height: 100%;
  }
}
.codeNumberCode {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 40px;
}
.pagination {
  margin: 0.3rem 0;
}
.dialog-footer {
    position: relative;
    width: 100%;
    height: 40px;
    .btn {
      position: absolute;
      right:15px;
    }
  }
  .block{
    float: left;
  }
</style>
